 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Flex_Stack_Positioned_Widget extends StatelessWidget {
   const Flex_Stack_Positioned_Widget({Key? key}) : super(key: key);

   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("权重_层叠_定位----布局",),

       ),
       body: Layout(),
     );
   }
 }
 class Layout extends StatelessWidget {
   const Layout({Key? key}) : super(key: key);

   @override
   Widget build(BuildContext context) {
     return ListView(
       children: <Widget>[
         Text("Flex布局",style: TextStyle(
           fontSize: 20,
           fontWeight: FontWeight.bold,
           color: Colors.black
         ),textAlign: TextAlign.center,),
        Flex(direction: Axis.horizontal,
          children: <Widget>[
            Expanded(flex:1,child: Container(
              height: 100,
              color: Colors.black,
            )),
            Expanded(flex:2,child: Container(
              height: 100,
              color: Colors.red,
            )),
            Expanded(flex:3,child: Container(
              height:100,
              color: Colors.yellow,
            )),
            Expanded(flex:1,child: Container(
              height:100,
              color: Colors.blue,
            )),
          ],
        ),
         Text("Stack布局",style: TextStyle(
             fontSize: 20,
             fontWeight: FontWeight.bold,
             color: Colors.black
         ),textAlign: TextAlign.center,),
         Stack(
           alignment:AlignmentDirectional.center,
           children: <Widget>[
             Container(
               width: 100,
               height: 100,
               color: Colors.green,
             ),
             Container(
               width: 80,
               height: 80,
               color: Colors.red,
             ),
             Container(
               width: 60,
               height: 60,
               color: Colors.yellow,
             ),
             Container(
               width: 40,
               height: 40,
               color: Colors.black,
             ),
             Container(
               width: 20,
               height: 20,
               margin: EdgeInsets.only(left: 10),
               color: Colors.white,
             ),
           ],
         ),
         Text("Positioned布局  相对于父布局配合Stack",style: TextStyle(
             fontSize: 20,
             fontWeight: FontWeight.bold,
             color: Colors.black
         ),textAlign: TextAlign.center,),
         Stack(
           alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
           children: <Widget>[
             Positioned(
               left: 18.0,
               child: Text("I am Jack"),
             ),
             Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),
               color: Colors.red,
             ),
             Positioned(
               right: 18.0,
               child: Text("Your friend"),
             )
           ],
         ),
         Text("Wrap流式布局",style: TextStyle(
             fontSize: 20,
             fontWeight: FontWeight.bold,
             color: Colors.black
         ),textAlign: TextAlign.center,),
         Wrap(
           spacing:3,
          runSpacing: 3,
          children: <Widget>[
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
            Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
          ],
         )
       ],
     );
   }
 }

